import React from "react";
import PropsTypes from "prop-types";

//单个受控组件
// class App extends React.Component {
//     state = {
//         val: "hello"
//     }
//     handleChange = (e) => {
//         this.setState({
//             val: e.target.value
//         })
//     }
//     render() {
//         return <div>
//             <h1>{this.state.val}</h1>
//             <input value={this.state.val} type="text" onChange={this.handleChange} />
//         </div>
//     }
// }

//多个受控组件同时绑定状态，只需声明一个事件处理函数，在不同的组件中获取对应的参数
// class App extends React.Component {
//     state = {
//         username: "",
//         pwd: "",
//         email: ""
//     }
//     handleChange = (e,type) => {
//         this.setState({
//             [type]: e.target.value
//         })
//     }
//     render() {
//         return <div>
//             姓名：<input value={this.state.username} type="text" onChange={(e) => this.handleChange(e,"username")} />
//             密码：<input value={this.state.pwd} type="password" onChange={(e) => this.handleChange(e,"pwd")} />
//             邮箱：<input value={this.state.email} type="text" onChange={(e) => this.handleChange(e,"email")} />
//         </div>
//     }
// }

//非受控组件:利用ref获取DOM节点
const ele = "<h1>hello</h1>";
class App extends React.Component {
    state = {
        defval:"123",
        color: "red"
    }
    componentDidMount() {
        this.inp.focus();
    }
    colorChange = () => {
        return `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
    }
    render() {
        return <div>
            <div 
                //解析html文本
                dangerouslySetInnerHTML={{__html:ele}}
                style={{backgroundColor:this.state.color,lineHeight:"30px",fontSize:"20px"}}
                onClick={()=>this.setState({color:this.colorChange()})}
            ></div>
            <input 
                //defaultValue={this.state.defval} 
                ref={(ele)=>{
                    this.inp = ele
                }}
                type="text" 
                placeholder="请输入..."
            />
            <button onClick={()=>{console.log(this.inp.value)}}>获取input的值</button>
        </div>
    }
}

App.propsTypes = {
    title: PropsTypes.string.isRequired
}

export default App;